<template>
	<view>
		<view class="flex-center">
			<view class="ordernavmain1" v-if="userInfo.level ==4">
				<view class="ordereach1" :class="activenav1 ==1 ? 'activenav1':''" @click="navclick1(1)">普通会员</view>
				<view class="ordereach1" :class="activenav1 == 2 ? 'activenav1':''" @click="navclick1(2)">授权推客</view>
				<view class="ordereach1" :class="activenav1 == 3 ? 'activenav1':''" @click="navclick1(3)">门店推客</view>
			</view>
			<view class="ordernavmain1" v-if="userInfo.level ==3">
				<view class="ordereach1" :class="activenav1 ==1 ? 'activenav1':''" @click="navclick1(1)">普通会员</view>
				<view class="ordereach1" :class="activenav1 == 2 ? 'activenav1':''" @click="navclick1(2)">授权推客</view>
			</view>
		</view>
		<view class="content margin30">
			<view class="flex-s">
				<view class="ordernavmain">
					<view class="ordereach" :class="activenav == 0 ? 'activenav':''" @click="navclick(0)">全部</view>
					<view class="ordereach" :class="activenav == 1 ? 'activenav':''" @click="navclick(1)">今天</view>
					<view class="ordereach" :class="activenav == 2 ? 'activenav':''" @click="navclick(2)">近7天</view>
					<view class="ordereach" :class="activenav == 3 ? 'activenav':''" @click="navclick(3)">近15天</view>
					<view class="ordereach" :class="activenav == 4 ? 'activenav':''" @click="navclick(4)">近30天</view>
				</view>
				<view>
					<uni-calendar ref="calendar" :insert="false" :clearDate="false" @confirm="confirm" />
				</view>
			</view>
			<view class="user-withdraw-code">
				<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption"
					@down="downCallback">
					<!-- <view v-if="activenav1 == 1" class="p-t-20">
						<view class="bg-white" v-for="(item, index) in list" :key="index" >
							<record-cell :remark="item.source_type" :date="item.create_time" :money="item.change_amount" :type="item.change_type" />
						</view>
					</view> -->
					<view class="tuiinfo">
						<view class=" flex-start tuilist" v-for="(item, index) in list" :key="index" @click="getdetail(item)">
							<image class="avatar" :src="item.avatar" mode=""></image>
							<view class="">
								<view class="avatarname">{{item.nickname}}</view>
								<view class="number"><text v-if="item.mobile!=''" style="margin-right: 26rpx;">{{item.mobile}}</text><text>{{item.create_time}}</text></view>
							</view>
						</view>
					</view>
				</mescroll-body>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapMutations, mapActions, mapGetters } from "vuex";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {
		getWithdrawRecords,
		getKhFirstlist,
		getCommission
	} from "@/api/user"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				upOption: {
					empty: {
						icon: '/static/image/order_null.png',
						tip: '暂无记录', // 提示
					}
				},
				list: [], // 列表数据--全部
				activenav1: 1,
				activenav: 0,
				userinfo: []
			}
		},
		onLoad(option) {
			// this.activenav1 = option.activenav1
			// this.activenav = option.activenav
			// this.$refs.pageHead.getTopHeight()
			// this.userinfo = uni.getStorageSync('userInfo')
		},
		computed: {
		    ...mapGetters(["userInfo", "appConfig"]),
		},
		methods: {
			getdetail(option){
				if(option.level == 1){
					this.apifun.navigate('/pages/mine/customerManage','id='+option.id)
				}
				if(option.level == 2){
					this.apifun.navigate('/bundle_b/pages/level-three','user_id='+option.id)
				}
				if(option.level == 3){
					this.apifun.navigate('/pages/mine/customerManage','id='+option.id)
				}
			},
			upCallback(page) {
				console.log('page',page)
				const pageNum = page.num; // 页码, 默认从1开始
				const pageSize = page.size; // 页长, 默认每页10条
					getKhFirstlist({
						page_size: pageSize,
						page_no: pageNum,
						level: this.activenav1,
						time_type: this.activenav,
					}).then(({
						data
					}) => {
						if (page.num == 1) this.list = [];
						const curPageData = data.list;
						const curPageLen = curPageData.length;
						const hasNext = !!data.more;
						this.list = this.list.concat(curPageData); 
						this.mescroll.endSuccess(curPageLen, hasNext);
					}).catch(() => {
						this.mescroll.endErr()
					})
			},
			navclick1(type) { //切换状态1
				// this.downCallback()
				let that = this;
				that.activenav1 = type;
				that.downCallback()
			},
			navclick(type) { //切换状态
			// this.downCallback()
				let that = this;
				that.activenav = type;
				that.downCallback() 
			},
			styleWithdrawStatus(status) {
				switch (status) {
					case 1:
						return '#0CC21E';
					case 2:
						return '#666666';
					case 3:
						return '#FF2C3C';
					case 4:
						return '#FF2C3C';
				}
			},
			open() { //打开日历
				this.$refs.calendar.open();
			},
			confirm(e) {
				console.log(e);
			}
		}
	}
</script>

<style>
	page {
		background-color: #efefef;
		padding-bottom: 30rpx;
	}

	.mybg {
		position: relative;
	}

	.bgimg {
		width: 100%;
		height: 300rpx;
	}

	.head {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		margin-right: 20rpx;
	}

	.userinfo {
		width: 100%;
		position: absolute;
		top: 36rpx;
	}

	.nametop {
		width: 560rpx;
	}

	.name {
		font-size: 28rpx;
		color: #fff;
		margin-bottom: 2rpx;
	}

	.vip {
		width: 200rpx;
		border-radius: 50rpx;
		padding: 0 4rpx;
		font-size: 42rpx;
		/* font-weight: 900; */
		color: #fff;
	}

	.vip text {
		font-size: 26rpx;
		color: #f5f7fb;
		font-weight: 300;
		margin-left: 10rpx;
	}

	.gradebox {
		width: 692rpx;
		box-sizing: border-box;
		background-color: #fff;
		position: absolute;
		top: 180rpx;
		padding: 32rpx;
		border-radius: 20rpx;
	}

	.graderow {
		text-align: center;
		width: 33%;

	}

	.graderow:nth-of-type(1),
	.graderow:nth-of-type(2) {
		border-right: #eaeaea 1rpx solid;
	}

	.gradenum {
		/* 		font-weight: 900; */
		font-size: 42rpx;
		color: #ea313b;
	}

	.gradetext {
		font-size: 26rpx;
		color: #707070;
	}

	.numgrades {
		font-size: 38rpx;
	}

	.content {
		background-color: #fff;
		border-radius: 12rpx;
		margin-top: 26rpx;
		padding: 26rpx;
	}

	.ordernavmain1 {
		margin-top: 30rpx;
		/* width: 50%; */
		display: flex;
		justify-content: space-between;
	}

	.ordernavmain {
		/* width: 85%; */
		display: flex;
		justify-content: space-between;
	}
	.ordereach1 {
		position: relative;
		color: #0A0A0A;
		font-size: 28rpx;
		width: 130rpx;
		padding: 4rpx 0;
		text-align: center;
		border-radius: 40rpx;
		margin-right: 26rpx;
	}
	.ordereach {
		position: relative;
		color: #0A0A0A;
		font-size: 28rpx;
		width: 130rpx;
		padding: 4rpx 0;
		text-align: center;
		border-radius: 40rpx;
	}

	.activenav {
		color: #fff;
		background-color: #ee434b;
	}

	.activenav1::after {
		font-size: 34rpx;
		position: absolute;
		left: 50%;
		top: 46rpx;
		content: "";
		display: block;
		width: 60rpx;
		margin-left: -30rpx;
		height: 4rpx;
		background-color: #f3430e;
		border-radius: 2rpx;
	}

	.activenav1 {
		font-size: 30rpx;
		color: #ee434b;
	}
	.calendar {
		font-size: 42rpx;
		color: #535353;
		margin-top: -4rpx;
	}

	.contentbox {
		padding-bottom: 20rpx;
	}

	.contenttit {
		font-size: 30rpx;
		border-bottom: #f8f8f8 1rpx solid;
		margin: 50rpx 30rpx 16rpx 30rpx;
		padding-bottom: 30rpx;
	}

	.iconimg image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 14rpx;
	}

	.tend {
		color: #979797;
		font-size: 28rpx;
	}

	.textbox {
		padding: 0 30rpx;
		font-size: 26rpx;
		color: #969696;
	}

	.tendnum {
		color: #ffc071;
		font-size: 30rpx;
		margin-top: 4rpx;
	}
	.avatar{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 28rpx;
	}
	.avatarname{
		font-weight: bold;
		font-size: 30rpx;
	}
	.number{
		color: #8f8fab;
		font-size: 26rpx;
		margin-top: 12rpx;
	}
	.tuilist{
		padding: 18rpx 0;
		border-bottom: 1rpx solid #e5e5e5;
	}
</style>
